<template>
    <div class="menuitem">
        <div class="Seleitem" v-for="(item, index) in bind" :key="index" @click="showpage(item)">
            <span>{{ item.name }}</span>
        </div>
        <!-- <div class="Seleitem">
            <span>视频课</span>
        </div>
        <div class="Seleitem">
            <span>线下课</span>
        </div>
        <div class="Seleitem">
            <span>直播课</span>
        </div> -->
        <!-- <trainRight></trainRight> -->
    </div>
</template>

<script setup lang="ts">
import trainRight from '../../trainRight-bottom/index.vue';
import { ref } from 'vue';
import useTrainroomStore from '@/store/modules/trainroom';

const TrainroomStore = useTrainroomStore();
const props = defineProps(['bind']);
interface typeorsubject {
    name: string;
    type?: string;
    subject?: string;
}
const showpage = (item: typeorsubject) => {
    if (item.type) {
        TrainroomStore.getshowpage();
    } else if (item.subject) {
        TrainroomStore.getshowcollect();
    } else if (item.name == '浏览记录') {
        TrainroomStore.gethistorydata();
    }
};
</script>

<style scoped lang="less">
.menuitem {
    font-size: 16px;
    background: #fff;
    height: 72px;
    // background-color: pink;

    .Seleitem {
        float: left;
        padding: 28px 30px;
        color: #111;
        font-size: 14px;
        position: relative;
        cursor: pointer;
        &:after {
            position: absolute;
            height: 4px;
            width: 37px;
            top: 68px;
            bottom: 0;
            left: 50%;
            position: absolute;
            background-color: #fff;
            transform: translateX(-50%);
            content: '';
        }
        &:hover::after {
            background-color: #f93684;
        }
    }
}
</style>
